<ng-container *transloco="let t; read: 'metadata-filter'">
  <ng-container *ngIf="toggleService.toggleState$ | async as isOpen">
    <div class="phone-hidden" *ngIf="utilityService.getActiveBreakpoint() > Breakpoint.Tablet">
      <div #collapse="ngbCollapse" [ngbCollapse]="!isOpen" (ngbCollapseChange)="setToggle($event)">
        <ng-container [ngTemplateOutlet]="filterSection"></ng-container>
      </div>
    </div>

    <div class="not-phone-hidden" *ngIf="utilityService.getActiveBreakpoint() < Breakpoint.Desktop">
      <app-drawer #commentDrawer="drawer" [isOpen]="isOpen" [options]="{topOffset: 56}" (drawerClosed)="toggleService.set(false)">
        <h5 header>
          {{t('filter-title')}}
        </h5>
        <div body class="drawer-body">
          <!-- TODO: BUG: Filter section is instantiated twice if this isn't ngIf'd -->
          <ng-container [ngTemplateOutlet]="filterSection"></ng-container>
        </div>
      </app-drawer>
    </div>
  </ng-container>

  <ng-template #filterSection>
    <div class="filter-section mx-auto pb-3" *ngIf="fullyLoaded && filterV2">
      <div class="row justify-content-center g-0">
        <app-metadata-builder [filter]="filterV2"
                              [availableFilterFields]="allFilterFields"
                              [statementLimit]="filterSettings.statementLimit"
                              (update)="handleFilters($event)">
        </app-metadata-builder>
      </div>
      <form [formGroup]="sortGroup" class="container-fluid">
        <div class="row mb-3">
          <div class="col-md-2 col-sm-2">
            <div class="form-group pe-1">
              <label for="limit-to" class="form-label">{{t('limit-label')}}</label>
              <input id="limit-to" type="number" inputmode="numeric" class="form-control" formControlName="limitTo">
            </div>
          </div>
          <div class="col-md-3 col-sm-10">
              <label for="sort-options" class="form-label">{{t('sort-by-label')}}</label>
              <button class="btn btn-sm btn-secondary-outline" (click)="updateSortOrder()" style="height: 25px; padding-bottom: 0;" [disabled]="filterSettings.sortDisabled">
                <i class="fa fa-arrow-up" [title]="t('ascending-alt')" *ngIf="isAscendingSort; else descSort"></i>
                <ng-template #descSort>
                  <i class="fa fa-arrow-down" [title]="t('descending-alt')"></i>
                </ng-template>
              </button>
              <select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
                <option *ngFor="let field of allSortFields" [value]="field">{{field | sortField}}</option>
              </select>
          </div>
          <ng-container *ngIf="utilityService.getActiveBreakpoint() > Breakpoint.Tablet" [ngTemplateOutlet]="buttons"></ng-container>
        </div>
        <div class="row mb-3" *ngIf="utilityService.getActiveBreakpoint() <= Breakpoint.Tablet">
          <ng-container [ngTemplateOutlet]="buttons"></ng-container>
        </div>
      </form>
    </div>
  </ng-template>
  <ng-template #buttons>
    <!-- TODO: I might want to put a Clear button which blanks out the whole filter -->
    <div class="col-md-2 col-sm-6 mt-4">
      <button class="btn btn-secondary col-12" (click)="clear()">{{t('reset')}}</button>
    </div>
    <div class="col-md-2 col-sm-6 mt-4">
      <button class="btn btn-primary col-12" (click)="apply()">{{t('apply')}}</button>
    </div>
  </ng-template>
</ng-container>


